import type {
  ChartsStatisticOptionState,
  ChartsStasticDataListDataListItem,
  ChartsStasticStateType
} from './typings'
import { defineComponent, ref, onMounted } from 'vue'
import { ElDialog, ElButton, ElCard, ElImage } from 'element-plus'
import styles from '../index.module.scss'

export default defineComponent({
  name: 'ChartsStatisticOption',
  props: ['visible'],
  emits: ['cancel', 'handleGetChartsStasticData'],
  setup(props: ChartsStatisticOptionState, { emit }) {
    const chartsStatisticDatas = ref<ChartsStasticStateType['chartsStasticDataList']>()
    const userInfo = JSON.parse(localStorage.getItem('saber-userInfo')!) // 获取当前登录人

    onMounted(() => {
      getCardsShowAndHidden()
    })

    // 数量统计 所有卡片
    const getCardsShowAndHidden = async () => {
      const info = JSON.parse(
        localStorage.getItem(`assetOverviewCardsInfo${userInfo.content.userId}`)!
      )
      chartsStatisticDatas.value = info
    }

    // 卡片显隐
    const handelShowAndHiddenCards = (record: ChartsStasticDataListDataListItem) => {
      for (let i = 0; i < chartsStatisticDatas.value!.length; i++) {
        const item = chartsStatisticDatas.value![i]
        if (item.type === record.type) {
          item.show = !item.show
          break
        }
      }
    }

    // 卡片显隐 做本地浏览器缓存
    const cardsShowAndHiddenSubmit = () => {
      window.localStorage.setItem(
        `assetOverviewCardsInfo${userInfo.content.userId}`,
        JSON.stringify(chartsStatisticDatas.value)
      ) // 更新所有

      // 上次缓存显示的数据
      const orderInfo = JSON.parse(
        localStorage.getItem(`assetOverviewCardsOrder${userInfo.content.userId}`)!
      )

      for (let i = 0; i < chartsStatisticDatas.value!.length; i++) {
        let hasCode = false
        // 数组对象的属性code是否已存在相同值
        const item = chartsStatisticDatas.value![i]
        for (let j = 0; j < orderInfo.length; j++) {
          const element = orderInfo[j]
          if (item.type === element.type) {
            hasCode = true
            break
          }
        }

        if (hasCode && !item.show) {
          // 已存在于原显示数据中, 且现在要隐藏
          for (let j = 0; j < orderInfo.length; j++) {
            const element = orderInfo[j]
            if (item.type === element.type) {
              orderInfo.splice(j, 1)
              break
            }
          }
        } else if (!hasCode && item.show) {
          // 未存在于原显示数据中
          orderInfo.push(item)
        }
      }

      window.localStorage.setItem(
        `assetOverviewCardsOrder${userInfo.content.userId}`,
        JSON.stringify(orderInfo)
      ) // 加存要显示的

      emit('handleGetChartsStasticData') // 更新数量统计的显示
      emit('cancel') // 返回
    }

    return () => {
      return (
        <div class={styles['charts-statistic-ElDialog']}>
          <ElDialog
            title="自定义卡片"
            width="1086px"
            modelValue={props.visible}
            closeOnClickModal={false} // 点遮罩层不关弹窗
            draggable // 可拖拽
            beforeClose={() => emit('cancel')}
          >
            <div class={styles['charts-statistic-option']}>
              {chartsStatisticDatas.value &&
                chartsStatisticDatas.value!.map((item, index) => (
                  <div style="margin-bottom: 24px;">
                    <div onClick={() => handelShowAndHiddenCards(item)}>
                      <ElCard
                        shadow="never"
                        class={{
                          [styles['charts-statistic-option-cards']]: true,
                          [styles['charts-statistic-option-cards-margin']]: index === 2
                        }}
                      >
                        {/* 图片 */}
                        <ElImage
                          class={styles['charts-statistic-option-cards-image']}
                          src={item.backgroundImage}
                        />
                        {/* 显隐 */}
                        {item.show && (
                          <ElImage
                            class={styles['charts-statistic-option-cards-show']}
                            src={'/assetOverview/chartsStatisticOption.png'}
                          ></ElImage>
                        )}
                      </ElCard>
                    </div>
                    <div class={styles['charts-statistic-option-name']}>{item.name}</div>
                  </div>
                ))}
            </div>

            <div class={styles['confirm-button']}>
              <ElButton onClick={() => emit('cancel')} class={styles['confirm-button-cancel']}>
                取 消
              </ElButton>
              <ElButton
                type="primary"
                onClick={cardsShowAndHiddenSubmit}
                class={styles['confirm-button-submit']}
              >
                确 定
              </ElButton>
            </div>
          </ElDialog>
        </div>
      )
    }
  }
})
